<template>
  <Echart
      id="leftCenter"
      :options="option"
      :isWatchAutoInit="true"
      class="left_center_inner"
      v-if="pageflag"
      ref="charts"
      @handleChartEvent="handleChartEvent"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
import {graphic} from "echarts"
import dataValues from "@/assets/js/data_values.json"
import moment from "moment/moment";

export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
      len:0,
      dataIndex:0,
      xAxisDataDate:null,
      xAxisDataTime:null,
      yAxisData:null,
      myChart:null,
      dataLen:0
    };
  },
  created() {

  },
  watch:{
    '$store.state.setting.echartsAutoTime':{
      handler () {
        this.clearData();
        this.switper();
      },
      deep: true
    }
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  props:{
    socketData: Object
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    handleChartEvent(val){
      // this.myChart = val;
      // setTimeout(()=>{
      //   this.myChart.setOption(this.option, true)
      // },1000)
    },
    getData() {
      if(this.socketData.average_speed){
        this.pageflag = true;
        const now = new Date();
        this.xAxisDataDate = (`${now.getFullYear()}-${now.getMonth()+1}-${now.getDay()}`)
        this.xAxisDataTime = (moment(new Date()).format('HH:mm:ss'))
        if(this.socketData.change_status){
          this.yAxisData = (parseFloat(this.socketData.average_speed.toFixed(2)))
        }else{
          this.yAxisData = 0
        }
        this.$nextTick(() => {
          this.init(this.xAxisDataDate,this.xAxisDataTime, this.yAxisData);
        });
      }

      this.switper();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on("mouseover", (params) => {
        this.clearData();
      });
      myChart.on("mouseout", (params) => {
        this.timer = setInterval(
            looper,
            this.$store.state.setting.echartsAutoTime
        );
      });
    },
    init(xDataDate, xDataTime ,yData) {
      const count = parseFloat(yData.toFixed(2))
      // const count = 1.48
      this.option = {
        tooltip: {
          show: false
          // formatter: "{a} <br/>值 : {c}"
        },
        grid: {
          top: 10,
          left: 0,
          right: 0,
          bottom: 0,
        },
        series: [
          { // 圆弧背景
            name: "1",
            type: "gauge",
            center: ['50%', '75%'],
            radius: '140%',
            min: 0, //最小刻度
            max: 10, //最大刻度
            startAngle: 185,
            endAngle: -5,
            axisLine: {
              lineStyle: {
                color: [
                  [1, "#315267"]
                ],
                width: 20
              }
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,

            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
              offsetCenter: [0, 40],
              formatter: function (value) {
                return `{a|${value}}` + '{b|m/s}';
              },
              rich: {
                a: {
                  fontSize: 15,
                  fontWeight: '700',
                  color: '#fff'
                },
                b: {
                  fontSize: 18,
                  fontWeight: '700',
                  color: 'rgba(240, 114, 12, 1)'
                }
              }
            },
            data: [{ value: 0 }],
            pointer: {
              show: false
            },
          },
          {
            // 渐变条
            name: '2',
            type: 'gauge',
            center: ['50%', '75%'],
            radius: '140%',
            min: 0,
            max: 10,
            startAngle: 185,
            endAngle: -5,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            detail: {
              show: true,
              offsetCenter: [0, 40],
              formatter: function (value) {
                return `{a|${value}}` + '{b| m/s}';
              },
              rich: {
                a: {
                  fontSize: 15,
                  fontWeight: '700',
                  color: '#fff'
                },
                b: {
                  fontSize: 18,
                  fontWeight: '700',
                  color: 'rgba(240, 114, 12, 1)'
                }
              }
            },

            progress: {
              show: true,
              width: 20,
              itemStyle: {
                color: {
                  // type: 'linear',
                  // x: 0,
                  // y: 0,
                  // x2: 0,
                  // y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: '#5abf39'
                    },
                    {
                      offset: 0.3,
                      color: '#f6aa3f'
                    },
                    {
                      offset: 0.5,
                      color: '#f6aa3f'
                    },
                    {
                      offset: 0.8,
                      color: '#ff5252'
                    },
                    {
                      offset: 1,
                      color: '#ff5252'
                    }
                  ]
                }
              }
            },
            data: [{ value: count }],
          },
          { // 刻度
            name: '3',
            type: 'gauge',
            center: ['50%', '75%'],  //边距
            radius: '110%',
            startAngle: 185,
            endAngle: -5,
            min: 0,
            max: 10,
            animation: true,
            detail: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              distance: -30,
              fontSize: 14,
              textStyle: {
                color: '#88afcb'
              }
            },
            splitLine: {
              show: true,
              length: 15,
              lineStyle: {
                width: 4,
                color: '#88afcb'
              }
            },
            pointer: {
              show: false
            },
            itemStyle: {
              color: '#7DCDEE',
            },
            data: [{ value: 0 }]
          },
          {
            // 内侧指针
            name: '4',
            type: 'gauge',
            radius: '49%',
            center: ['50%', '75%'],
            startAngle: 185,
            endAngle: -5,
            min: 0,
            max: 10,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: 0
            },
            splitLine: {
              show: 0
            },
            axisLabel: {
              show: 0
            },
            pointer: {
              show: true,
              length: '105%',
              width: 3
            },
            detail: {
              show: false
            },
            itemStyle: {
              normal: {
                color: '#27d3fd'
              }
            },
            data: [{ value: count }],
            z: 9
          },
          {
            //指针外环
            name: '5',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            center: ['50%', '75%'],
            radius: '3%',
            z: 10,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#27d3fd'
              }
            },
            data: [{ value: 0, }]
          },
          {
            //指针内环
            name: '6',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            center: ['50%', '75%'],
            radius: '1.5%',
            z: 10,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#f8fbff'
              }
            },
            data: [{ value: 0 }]
          }
        ]
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>